<template>
  <div class="topic-box">
    <div class="layout-logo">
      <router-link to="/">
        <img src="@/assets/logo-theme.png"/>
      </router-link>
    </div>
    <div class="layout-nav">
      <Menu mode="horizontal" active-name="1">
        <MenuItem name="1" to="/ecosphere/document">
          文档
        </MenuItem>
        <Submenu name="4">
          <template slot="title">
            生态圈
          </template>
          <MenuGroup title="前后端分离">
            <MenuItem name="1-1">Vue+NodeJs</MenuItem>
            <MenuItem name="1-2">React+NodeJs</MenuItem>
            <MenuItem name="1-3">RequireJs+SpringCloud</MenuItem>
            <MenuItem name="1-3">SeaJs+SpringCloud</MenuItem>
          </MenuGroup>
          <MenuGroup title="服务端渲染">
            <MenuItem name="2-1">Python+Django+bootstrap</MenuItem>
            <MenuItem name="2-2">Vue+Nuxt+NodeJs</MenuItem>
          </MenuGroup>
          <MenuGroup title="移动应用">
            <MenuItem name="3-1">微信小程序</MenuItem>
            <MenuItem name="3-2">微信公众号</MenuItem>
            <MenuItem name="3-3">H5应用</MenuItem>
            <MenuItem name="3-4">uni-app</MenuItem>
          </MenuGroup>
        </Submenu>
        <MenuItem name="5" to="/about">
          关于我
        </MenuItem>
      </Menu>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'ecosphereTopic'
    }
</script>

<style lang="scss" scoped>
.topic-box{
  height: 60px;
  background-color: #ffffff;
  padding: 0 50px;
  border-bottom: 1px solid #e1e1e1;
  .layout-logo{
    height: 100%;
    overflow: hidden;
    float: left;
    padding: 5px 10px;
    img{
      max-height: 100%;
      width: 120px;
    }
  }
  .layout-nav{
    float: right;
  }
}
</style>
